<template>
	<div class="header">
		<ul>
			<li class="new">新增用户：<CountTo :startVal='0' :endVal='238' :duration='4000'></CountTo></li>
			<li class="total">用户总计：<CountTo :startVal='0' :endVal='5017' :duration='4000'></CountTo></li>
			<li class="huoyue">活跃用户：<CountTo :startVal='0' :endVal='2027' :duration='4000'></CountTo></li>
		</ul>
	</div>
	<bar-graph></bar-graph>
</template>

<script setup lang="ts">
	// 注意事项：使用的版本不对可能就会报错，无法正常使用，报错的话检查下使用的版本是否合适。
	// 兼容性：
	// v1.1.* 仅支持vue3；
	// v1.0.* 同时兼容vue2、vue3，亦能在ts下使用（可能存在ts识别不太对的问题）
	
	// 如果只使用的 vue2，安装使用 vue-count-to 组件；
	// 如果需要使用 vue2-ts 版本，安装 vue-count-to-ts ；
	// 如果使用的 vue3，需要安装 vue3-count-to 组件。
	// npm安装  npm install vue3-count-to --save
	
	// import {ref} from 'vue'
	import BarGraph from "@/components/BarGraph/BarGraph.vue";
	import { CountTo } from 'vue3-count-to';
	
</script>

<style scoped>
	.header{
		margin:20px 0;
	}
	ul{
		list-style: none;
		display: flex;
		justify-content: space-around;
	}
	
	ul li{
		display: inline-block;
		width: 30%;
		text-align: center;
		height: 80px;
		line-height: 80px;
		color:#fff;
	}
	li.new{
		background: #749;
	}
	li.total{
		background: #911;
	}
	li.huoyue{
		background: #985;
	}
	li>span{
		font-weight: bold;
	}
</style>